<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>项目管理</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="searchParams" label-width="80px" @submit.native.prevent="" :inline="true" size="default">
              <el-form-item label="项目名称">
                <el-input v-model="searchParams.name" clearable placeholder="请输入项目名称..." />
              </el-form-item>
              <el-form-item>

                <el-button :icon="Search" type="primary">搜索</el-button>
                <el-button :icon="Close" type="danger">重置</el-button>
                <!-- <el-button :icon="Position" type="success">阶段资源统计</el-button>
                <el-button :icon="Position" type="success">阶段时间统计</el-button>
                <el-button :icon="Position" type="success">任务进度统计</el-button>
                <el-button :icon="Position" type="success">项目时间计划统计</el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <!-- {{ ProjectData.list }} -->
            <el-table height="auto" :data="Object.keys(ProjectData.list)" @select="handleSelectionChange"
              @select-all="handleCheckAll" :row-class-name="tableRowClassName" style="width: 100%">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column show-overflow-tooltip label="任务名称" min-width="200" align="center">
                <template #default="scope">
                  {{
                    scope.row
                  }}
                </template>
              </el-table-column>

              <el-table-column label="操作" min-width="320" align="center">
                <template #default="scope">
                  <el-button type="danger" :icon="Close">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="display: flex; justify-content: center;">
            <!-- 柱状图 -->
            <HumSeStatistics></HumSeStatistics>
            <!-- 燃尽图 -->
            <BurnDownChat></BurnDownChat>
          </div>
          <div class="container-footer">
            <el-pagination v-model:current-page="searchParams.page" v-model:page-size="searchParams.size"
              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="ProjectData.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </template>
    </topAndbottom>
  </div>
</template>

<script setup lang='ts'>
import { Search, Plus, Edit, Close, View, Position } from '@element-plus/icons'
import { reactive, ref, toRefs, onMounted, nextTick } from 'vue';
import VstatusTable from './VstatusTable'
import HumSeStatistics from './components/HumSeStatistics.vue';
import BurnDownChat from './components/BurnDownChat.vue';
import { taskAnalyseStore } from '@/store/taskAnalyse';
import { it } from 'node:test';
import { log } from 'node:console';
const store = taskAnalyseStore()
const { ProjectData, searchParams, dictDateList, handleSizeChange, handleCurrentChange, stageTableData, tableRowClassName } = VstatusTable()
// import ProjectPerson from '@/composables/02Review/01ProjectMan/TaffingDialog'
let sonList = reactive({
  list: []
})
let handleSelectionChange = (selection) => {
  console.log(selection);

  const arr = {} as any
  if (selection.length > 0) {
    selection.map(item => {
      Object.keys(ProjectData.list).map((it, inx) => {
        if (item === it) {
          arr[item] = ProjectData.list[item]
        }
      })
    })
  }
  console.log(arr);

  store.taskChange(arr)
}
let handleCheckAll = (selection) => {
  console.log(selection);
  const arr = {} as any
  if (selection.length > 0) {
    selection.map(item => {
      Object.keys(ProjectData.list).map((it, inx) => {
        if (item === it) {
          arr[item] = ProjectData.list[item]
        }
      })
    })
  }
  console.log(arr);

  store.taskChange(arr)
}
</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;

  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>